<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<input type="button" value="最前面">
<input type="button" value="最后面">
<input type="button" value="上海前面">
<input type="button" value="上海后面">
<input type="button" value="删除上海">
<hr>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
</ul>

<img src="../day02/3.png" alt="">
<script src="../js/jquery-1.4.2.js"></script>
<script>
    setTimeout(function () {
        //修改元素的属性
        $("img").attr("src","../day02/3.png");
    },2000);

    $("input:eq(1)").click(function () {
        //创建元素
        let li = $("<li></li>");
        //修改li的文本内容   .text等效 innerText
        li.text($("input:first").val());
        //把li装进ul最前面
        $("ul").prepend(li);
    })
    $("input:eq(2)").click(function () {
        //创建元素
        let li = $("<li></li>");
        //修改li的文本内容   .text等效 innerText
        li.text($("input:first").val());
        //把li装进ul最后面
        $("ul").append(li);
    })
    $("input:eq(3)").click(function () {
        //创建元素
        let li = $("<li></li>");
        //修改li的文本内容   .text等效 innerText
        li.text($("input:first").val());
        //把li装进上海前面
        $("li:contains('上海')").before(li);
    })
    $("input:eq(4)").click(function () {
        //创建元素
        let li = $("<li></li>");
        //修改li的文本内容   .text等效 innerText
        li.text($("input:first").val());
        //把li装进上海后面
        $("li:contains('上海')").after(li);
    })
    $("input:eq(5)").click(function () {
       //删除上海
        $("li:contains('上海')").remove();
    })

    $("ul").html("<li>啦啦啦</li>");

    //修改元素样式
    // $("ul").css("color","red");
    //批量添加样式
    $("ul").css({"color":"red","background-color":"green"});
    //获取元素样式值
    // alert($("ul").css("color"));

    // let i = $("<img src='../day02/3.png'>");
    let i = $("<img>");
    i.alter("src","../day02/3.png");
    $("body").append(i);




</script>
</body>
</html>